<template>
<div class="loading">
    <span></span>
</div>
</template>

<script>
export default {

}
</script>

<style scoped>
    @keyframes cirRotate{
        from{
            transform:rotate(0deg)
        }to{
            transform:rotate(360deg)
        }
    }
    
    .loading{
        width: 60px;
        height: 60px;
        border: 3px dotted black;
        position: relative;
        border-radius: 50%;
        animation: cirRotate 1s linear infinite;
        margin: 0 auto;
    }
    .loading span{
        width: 2px;
        height: 20px;
        background-color: #000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-100%);
    }
</style>